import React, { Component } from 'react'
import styles from './index.module.scss'
import MyNavBar from '../../components/MyNavBar'
import { WhiteSpace, WingBlank, Flex, Toast } from 'antd-mobile'
import { login } from '../../api/user'
import { setToken } from '../../utils/token'
class Login extends Component {
    constructor() {
        super()

        this.state = {
            username: 'test2',
            password: 'test2'
        }
    }
    // 方法1
    // changeUserName = e => {
    //     this.setState({
    //         username: e.target.value
    //     })
    // }

    // changePassword = e => {
    //     this.setState({
    //         password: e.target.value
    //     })
    // }
    // 方法2
    changeValue = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    // 用户登录功能
    userLogin = async () => {
        const res = await login(this.state)
        console.log('登录', res)
        if (res.data.status === 400) {
            Toast.info(res.data.description, 1.5)
            return
        }
        Toast.info('登录成功~', 1)
        // 保存token
        setToken(res.data.body.token)
        // 返回上个页面
        if (this.props.location.state && this.props.location.state.from) {
            // this.props.history.push(this.props.location.state.from)
            this.props.history.replace(this.props.location.state.from)
        } else {
            this.props.history.goBack()
        }

    }
    render() {
        const { username, password } = this.state
        return (
            <div className={styles.root}>
                <MyNavBar>账号登录</MyNavBar>
                <WhiteSpace size="xl"></WhiteSpace>
                <WingBlank size="lg">
                    <div className={styles.formItem}>
                        <input
                            className={styles.input}
                            value={username}
                            name='username'
                            onChange={this.changeValue}
                            placeholder='请输入账号'
                        />
                    </div>
                    <div className={styles.formItem}>
                        <input
                            className={styles.input}
                            type='password'
                            name='password'
                            placeholder='请输入密码'
                            onChange={this.changeValue}
                            value={password}
                        />
                    </div>
                    <div className={styles.formSubmit}>
                        <div onClick={this.userLogin} className={styles.submit}>
                            登录
            </div>
                    </div>
                    <Flex className={styles.backHome}>
                        <Flex.Item>
                            <a href='#/'>还没有账号，去注册~</a>
                        </Flex.Item>
                    </Flex>
                </WingBlank>
            </div>
        )
    }
}
export default Login
